<template>
  <view class="navigation">
    <eui-navbar ref="EuiNavBar" title="工单排名" displayable="true" rightIcon="" color="#000000" backgroundColor="#FFFFFF"/>
    <view class="main-view" :style="{ height: scrollHeight + 'rpx' }">
      <!--本月-->
      <eui-card :hPadding="0" :vPadding="40" :topMargin="0">
        <image :src="curMonthImg" mode="aspectFit" class="month-img-view" />
        <view class="content-view">
          <view class="item-view">
            <text class="top-text">{{ currentData.c_total_completed }}<text class="min-text">单</text></text>
            <text class="bottom-text">已完成</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ currentData.c_total_time }}<text class="min-text">分钟</text></text>
            <text class="bottom-text">总工时</text>
          </view>
          <view class="item-view">
            <text class="top-text rank-text" :class="[theme]" v-if="currentData.c_ranking > 0"><text class="min-text">第</text> {{ currentData.c_ranking }} <text class="min-text">名</text></text>
            <text class="top-text rank-text min-text" :class="[theme]" v-else>暂无</text>
            <text class="bottom-text">排名</text>
          </view>
        </view>
        <view class="line-view" />
        <view class="content-view">
          <view class="item-view">
            <text class="top-text">{{ currentData.c_total_over }}<text class="min-text">单</text></text>
            <text class="bottom-text">超时单</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ currentData.c_total_cancel }}<text class="min-text">单</text></text>
            <text class="bottom-text">取消单</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ currentData.c_total_todo }}<text class="min-text">单</text></text>
            <text class="bottom-text">未完单</text>
          </view>
        </view>
      </eui-card>
      <!--上月-->
      <eui-card :hPadding="0" :vPadding="40">
        <image src="../../../../static/img/rdsImgs/quest_tag_sy.png" mode="aspectFit" class="month-img-view" />
        <view class="content-view">
          <view class="item-view">
            <text class="top-text">{{ lastData.c_total_completed }}<text class="min-text">单</text></text>
            <text class="bottom-text">已完成</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ lastData.c_total_time }}<text class="min-text">分钟</text></text>
            <text class="bottom-text">总工时</text>
          </view>
          <view class="item-view">
            <text class="top-text rank-text" :class="[theme]" v-if="lastData.c_ranking > 0"><text class="min-text">第</text> {{ lastData.c_ranking }} <text class="min-text">名</text></text>
            <text class="top-text rank-text min-text" :class="[theme]" v-else>暂无</text>
            <text class="bottom-text">排名</text>
          </view>
        </view>
        <view class="line-view" />
        <view class="content-view">
          <view class="item-view">
            <text class="top-text">{{ lastData.c_total_over }}<text class="min-text">单</text></text>
            <text class="bottom-text">超时单</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ lastData.c_total_cancel }}<text class="min-text">单</text></text>
            <text class="bottom-text">取消单</text>
          </view>
          <view class="item-view">
            <text class="top-text">{{ lastData.c_total_todo }}<text class="min-text">单</text></text>
            <text class="bottom-text">未完单</text>
          </view>
        </view>
      </eui-card>
      <eui-card title="今日排名">
        <template v-slot:extra>
          <view class="extra-view">
            <text>(仅显示前5名)</text>
          </view>
        </template>
        <view class="rank-view">
          <view class="second-rank-view">
            <image src="../../../../static/img/rdsImgs/quest_panking2.png" mode="aspectFit" class="quest_panking2" />
            <image src="../../../../static/img/rdsImgs/quest_panking2_1.png" mode="aspectFit" class="quest_panking2_1" />
            <text class="rank-num">2</text>
            <view class="person-img-view">
              <image :src="rankingList[1].userIcon" @error="setErrorImg(rankingList[1])" class="border-radius-50"
                     style="width: 128rpx;height: 128rpx;" v-if="rankingList[1]"></image>
            </view>
            <text class="rank-common-text title">{{ rankingList[1]?.c_user_name || '' }}</text>
            <text class="rank-common-num num-text" v-if="rankingList[1]">{{ rankingList[1].completed_task_count }}<text style="font-size: 22rpx;">单</text></text>
          </view>
          <view class="first-rank-view">
            <image src="../../../../static/img/rdsImgs/quest_panking1.png" mode="aspectFit" class="quest_panking1" />
            <image src="../../../../static/img/rdsImgs/quest_panking1_1.png" mode="aspectFit" class="quest_panking1_1" />
            <text class="rank-num">1</text>
            <view class="person-img-view">
              <image :src="rankingList[0].userIcon" @error="setErrorImg(rankingList[0])" class="border-radius-50"
                     style="width: 148rpx;height: 148rpx;" v-if="rankingList[0]"></image>
            </view>
            <text class="rank-common-text title">{{ rankingList[0]?.c_user_name || '' }}</text>
            <text class="rank-common-num num-text" v-if="rankingList[0]">{{ rankingList[0].completed_task_count }}<text style="font-size: 22rpx;">单</text></text>
          </view>
          <view class="second-rank-view third-rank-view">
            <image src="../../../../static/img/rdsImgs/quest_panking3.png" mode="aspectFit" class="quest_panking2" />
            <image src="../../../../static/img/rdsImgs/quest_panking3_1.png" mode="aspectFit" class="quest_panking2_1" />
            <text class="rank-num">3</text>
            <view class="person-img-view">
              <image :src="rankingList[2].userIcon" @error="setErrorImg(rankingList[2])" class="border-radius-50"
                     style="width: 128rpx;height: 128rpx;" v-if="rankingList[2]"></image>
            </view>
            <text class="rank-common-text title">{{ rankingList[2]?.c_user_name || '' }}</text>
            <text class="rank-common-num num-text" v-if="rankingList[2]">{{ rankingList[2].completed_task_count }}<text style="font-size: 22rpx;">单</text></text>
          </view>
        </view>
        <view class="rank-item" v-if="rankingList[3]">
          <view class="icon-view">
            <image :src="rankingList[3].userIcon" @error="setErrorImg(rankingList[3])" class="border-radius-50"
                   style="width: 72rpx;height: 72rpx;" v-if="rankingList[3]"></image>
          </view>
          <text class="rank-item-text rank-item-name">{{ rankingList[3].c_user_name }}</text>
          <text class="rank-item-text rank-item-num">{{ rankingList[3].completed_task_count }}单</text>
          <text class="rank-item-place" :class="[theme]">第4名</text>
        </view>
        <view class="rank-item" v-if="rankingList[4]">
          <view class="icon-view">
            <image :src="rankingList[4].userIcon" @error="setErrorImg(rankingList[4])" class="border-radius-50"
                   style="width: 72rpx;height: 72rpx;" v-if="rankingList[4]"></image>
          </view>
          <text class="rank-item-text rank-item-name">{{ rankingList[4].c_user_name }}</text>
          <text class="rank-item-text rank-item-num">{{ rankingList[4].completed_task_count }}单</text>
          <text class="rank-item-place" :class="[theme]">第5名</text>
        </view>
      </eui-card>
    </view>
  </view>
</template>

<script setup type="ts">
import { storeToRefs } from 'pinia';
import {computed, onMounted, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import { getRdsUrl } from "@/hooks/rdsServices";
import {useMainStore} from "@/store/modules/store";
import {useLoginStore} from "@/store/modules/useLoginStore";
import useService from '@/hooks/useService';
import useUpload from "@/hooks/useUpload";
import { useThemeStore } from '@/store/themeStore';
import { getFirstDayOfPreviousMonth } from '@/hooks/useUtils';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
// 图片资源
const curMonthImg = theme._object.theme=='theme-blue'? '../../../../static/img/rdsImgs/quest_tag_by1.png' : '../../../../static/img/rdsImgs/quest_tag_by3.png';

const mainService = useService({ prefix: "mainApi" });
const { upload, remove, fetchFile } = useUpload({ prefix: 'mainApi' });
const rdsUrl = getRdsUrl();
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();
const scrollHeight = ref(0);
// 本月数据
const currentData = ref({
  c_total_completed: 0,
  c_total_time: 0,
  c_ranking: 0,
  c_total_over: 0,
  c_total_cancel: 0,
  c_total_todo: 0
})
// 上月数据
const lastData = ref({
  c_total_completed: 0,
  c_total_time: 0,
  c_ranking: 0,
  c_total_over: 0,
  c_total_cancel: 0,
  c_total_todo: 0
})
// 今日排名
const rankingList = ref([]);

// 成员头像
const setUserPic = (e) =>{
  let pic = '';
  const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
  pic = imgUrl + '/File/DownLoadImage/' + e;
  return pic
}

const setErrorImg = (e) => {
  e.userIcon = e.c_sex == '男' || e.c_sex == 'M' ? '/static/img/avatar_male.png' : '/static/img/avatar_male.png';
}

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) {
      let info = uni.createSelectorQuery().select(".main-view");
      info.boundingClientRect(function (data) {
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        scrollHeight.value = height / (res.windowWidth / 750) - 20;
      }).exec();
    }
  });
};

onMounted((e) => {
  getListHeight();
});

onLoad(async ()=>{
  uni.showLoading({ title: "查询中...", mask: true });
  await getThisMonthData(); // 本月
  await getLastMonthData(); // 上月
  await getDailyRanking(); // 排名
  uni.hideLoading();
})

// 本月数据
const getThisMonthData = async () => {
  const result = await mainService.request('tasktodo', 'FetchMonthTasksData', {});
  if (result) {
    currentData.value = result;
  }
}

// 上月数据
const getLastMonthData = async () => {
  let req = {
    c_modify_dt: getFirstDayOfPreviousMonth(),
  }
  const result = await mainService.request('tasktodo', 'FetchMonthTasksData', req);
  if (result) {
    lastData.value = result;
  }
}

// 今日排名
const getDailyRanking = async () => {
  const result = await mainService.request('tasktodo', 'FetchTodayTaskRanking', {});
  if (result && result.length > 0) {
    rankingList.value = result.map(obj => {
      return {
        ...obj,
        userIcon: setUserPic(obj.c_user_no)
      }
    })
  }
}

</script>

<style lang="scss" scoped>
@import '@/main.scss';
@import '@/uni.scss';

.navigation {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  background: #F2F2F2;
  position: relative;
}

.main-view {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  margin-top: 20rpx;
}

.content-view {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;

  .item-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: $uni-font-family;
    text-align: right;
    font-style: normal;
    text-transform: none;

    .top-text {
      font-weight: $uni-font-weight-level3;
      font-size: 42rpx;
      color: $uni-text-color-primary;
      line-height: 49rpx;
    }

    .bottom-text {
      font-weight: $uni-font-weight-level1;
      font-size: $uni-font-size-level5;
      color: $uni-text-color-hint;
      line-height: 33rpx;
    }

    .min-text {
      font-size: $uni-font-size-level6;
    }

    .rank-text {
      color: var(--theme-color);
    }
  }
}

.line-view {
  width: 100%;
  height: 2rpx;
  background: $uni-line-color;
  margin: 39rpx 0;
}

.extra-view {
  display: flex;
  position: absolute;
  left: 160rpx;
  font-family: $uni-font-family;
  text-align: left;
  font-style: normal;
  text-transform: none;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  color: $uni-text-color-hint;
  line-height: 28rpx;
}

.rank-view {
  width: 100%;
  height: 460rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.first-rank-view {
  flex: 1;
  height: 296rpx;
  border-radius: 60rpx 60rpx 0 0;
  margin: 0 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(106, 104, 247, 0.1) 0%, rgba(220, 147, 232, 0.1) 100%);
  position: relative;

  .title {
    margin-top: 125rpx;
  }

  .num-text {
    color: #6A68F7;
  }

  .person-img-view {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    padding: 6rpx;
    box-sizing: border-box;
    background: #CCCCCC;
    position: absolute;
    top: -100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .quest_panking1 {
    position: absolute;
    top: -148rpx;
    left: 15rpx;
    width: 69rpx;
    height: 63rpx;
  }

  .quest_panking1_1 {
    position: absolute;
    top: 37rpx;
    width: 39rpx;
    height: 40rpx;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rank-num {
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level3;
    font-size: $uni-font-size-level5;
    color: #FFFFFF;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    position: absolute;
    top: 40rpx;
    z-index: 15;
  }
}

.second-rank-view {
  width: 200rpx;
  height: 200rpx;
  border-radius: 30rpx 30rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 131, 89, 0.1) 0%, rgba(255, 100, 48, 0.1) 100%);
  position: relative;

  .title {
    margin-top: 85rpx;
  }

  .num-text {
    color: #FF6430;
  }

  .person-img-view {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    padding: 6rpx;
    box-sizing: border-box;
    background: #CCCCCC;
    position: absolute;
    top: -88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .quest_panking2 {
    position: absolute;
    top: -131rpx;
    left: 11rpx;
    width: 60rpx;
    height: 55rpx;
  }

  .quest_panking2_1 {
    position: absolute;
    top: 27rpx;
    width: 41rpx;
    height: 41rpx;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rank-num {
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level3;
    font-size: $uni-font-size-level5;
    color: #FFFFFF;
    line-height: 33rpx;
    text-align: right;
    font-style: normal;
    text-transform: none;
    position: absolute;
    top: 30rpx;
    z-index: 15;
  }
}

.third-rank-view {
  background: linear-gradient(136deg, rgba(0, 134, 248, 0.1) 0%, rgba(28, 218, 246, 0.1) 100%);

  .num-text {
    color: #02B7E6;
  }
}

.rank-common-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level5;
  color: $uni-text-color-primary;
  line-height: 33rpx;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.rank-common-num {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level3;
  font-size: 50rpx;
  color: $uni-text-color-primary;
  line-height: 58rpx;
  text-align: right;
  font-style: normal;
  text-transform: none;
  margin-top: 8rpx;
}

.rank-item {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100rpx;
  align-items: center;
  font-family: $uni-font-family;
  font-style: normal;

  .icon-view {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background: #EEEEEE;
    margin-right: 20rpx;
  }

  .rank-item-text {
    font-size: $uni-font-size-level3;
    color: $uni-text-color-primary;
    line-height: 39rpx;
    text-align: left;
  }

  .rank-item-name {
    font-weight: $uni-font-weight-level1;
    width: 140rpx;
  }

  .rank-item-num {
    font-weight: $uni-font-weight-level3;
    flex: 1;
  }

  .rank-item-place {
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level5;
    line-height: 33rpx;
    text-align: center;
    color: var(--theme-color);
  }
}

.month-img-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 110rpx;
  height: 110rpx;
}

.border-radius-50 {
  border-radius: 50%;
}

</style>
